import React, {Component} from 'react'
import {View, Text, TextInput, Alert, TouchableOpacity} from 'react-native'
import styles from '../../config/styles'
import AttachmentManagerPro from '../common/attachmentManagerPro'

class AddHomeworkDescribe extends Component {
    static navigationOptions = ({navigation}) => {
        const params = navigation.state.params
        if (params != undefined) {
            const _headerRight = (<TouchableOpacity
                                        style={{paddingRight: 5}}
                                        onPress={params.submit}
                                    >
                                        <Text style={[styles.header_font]}>
                                            保存
                                        </Text>   
                                    </TouchableOpacity>
                                )
            return {
                headerRight: _headerRight
            }
        }
    }

    constructor (props) {
        super(props) 
        const {params} = props.navigation.state
        this.state = {
            desription: params.description || '',
            attachments: params.attachments || [],
            onComplete: params.onComplete || (() => {})
        }
    } 

    componentDidMount () {
        this.props.navigation.setParams({
            submit: () => {
                const {desription, attachments, onComplete} = this.state
                onComplete(desription, attachments)
                this.props.navigation.goBack()
            }
        })
    }

     //附件完成上传之后
    onFinishedUpload = (name, type, awsPath) => {
        let _onDestroy = () => {this.onRemoveAttachment(name)}
        let new_attachment = {
            type: type,
            url: awsPath,
            name: name,
            allowDestroy: true,
            onDestroy: _onDestroy
        }
        this.state.attachments.push(new_attachment)
        this.setState({
            attachments: this.state.attachments
        })
    }

    //点击角标删除attachment的事件
    onRemoveAttachment = (attachment_name) => {
        Alert.alert('删除提醒', '确认要删除这个附件吗？',[
                {text: '取消', onPress: () => {}},
                {text: '确定', onPress: () => {
                    let _attachments = this.state.attachments.filter((atta, index) => {
                        return atta.name != attachment_name
                    })
                    this.setState({attachments: _attachments})
                }}
            ]
        )
    }

    render () {
        return (
            <View style={styles.main_body}>

            <View style={{padding: 15, backgroundColor: 'white'}}>
                <TextInput
                    style={[styles.background_light_grey_plus, {borderRadius: 5,height: 150}]}
                    multiline={true}
                    textAlignVertical={'top'}
                    placeholder={' 请输入作业描述'}
                    value={this.state.desription}
                    onChangeText={(txt) => this.setState({desription: txt})}
                />
                <AttachmentManagerPro attachments={this.state.attachments} onFinishedUpload={this.onFinishedUpload} />
            </View>
            </View>
        )
    }
}

export default AddHomeworkDescribe